<template>
  <div>
    <Table border :data="tableData1" :columns="columns1"></Table>
    <Table border :data="tableData2" :columns="columns2" v-if="method === 'newTable'"></Table>
  </div>
</template>

<script>
export default {
  props: {
    'projectId': {
      type: String,
    },
    'method': {
      type: String,
      required: true
    },
    'itemTypeList': {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      tableData1: [
        {
          name: '',
          type: '',
          num: '',
          money: '',
          vender: '',
          time: '',
          for: '',
          place: '',
          store_type: ''
        }
      ],
      tableData2: [
        {
          sum_money: '',
          man_phone: '',
          expense: '',
          dep_audit: '',
          center_audit: '',
        }
      ],
      columns1: [
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '物品类型',
          key: 'store_type',
          render: (h, params) => {
            return h('i-select', {
              props: {
                value: this.tableData1[params.index][params.column.key]
              },
              attrs: {
                'contentEditable': true,
              },
              on: {
                'on-change': (value) => {
                  this.tableData1[params.index][params.column.key] = value;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, this.itemTypeList.map((item) => {
              return h('i-option', {
                props: {
                  value: item.name
                }
              })
            }))
          }
        },
        {
          title: '型号及主要技术指标数量',
          key: 'type',
          width: 220,
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '数量',
          key: 'num',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '采购预算(万元)',
          key: 'money',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '推荐厂家',
          key: 'vender',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '拟购时间',
          key: 'time',
          width:150,
          render: (h, params) => {
            return h('DatePicker', {
              props: {
                type: 'date',
                value: this.tableData1[params.index][params.column.key]
              },
              style: {
                width: '130px'
              },
              on: {
                'on-change': (value) => {
                  this.tableData1[params.index][params.column.key] = value;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            })
          }
        },
        {
          title: '用途',
          key: 'for',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '设备安放地点',
          key: 'place',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData1[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          fix: 'right',
          align: 'center',
          render: (h, params) => {
            return h('i-button', {
              attrs: {
                disabled: !(this.tableData1.length > 1)
              },
              props: {
                type: 'error'
              },
              on: {
                'click': () => {
                  this.tableData1.splice(params.index, 1);
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, '删除')
          },
          renderHeader: (h, params) => {
            return h('i-button', {
              props: {
                type: 'success'
              },
              on: {
                'click': () => {
                  this.tableData1.push({
                    name: '',
                    type: '',
                    num: '',
                    money: '',
                    vender: '',
                    time: '',
                    for: '',
                    place: ''
                  })
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, [
              h('span', '+增加物品')
            ])
          }
        }
      ],
      columns2: [
        {
          title: '合计金额(万元)',
          key: 'sum_money',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData2[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        }, 
        {
          title: '经办人及联系电话',
          key: 'man_phone',
          width: 250,
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData2[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '经费来源情况(项目名称及经费号)',
          key: 'expense',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData2[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '部门审核负责人',
          key: 'dep_audit',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData2[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
        {
          title: '中心审核主管领导',
          key: 'center_audit',
          render: (h, params) => {
            return h('div', {
              attrs: {
                'contentEditable': true
              },
              on: {
                'blur': (e) => {
                  this.tableData2[params.index][params.column.key] = e.target.textContent;
                  this.$emit('add-apply-table', this.tableData1, this.tableData2);
                }
              }
            }, params.row[params.column.key])
          }
        },
      ]
    }
  },
  methods: {
  }
}
</script>
